<template>
  <div class="det">
       <van-nav-bar
        title="详情"
        left-text="返回"
       
        left-arrow
        @click-left="$router.go(-1)"
    
        />
          <van-loading v-if="!isload" size="24px" vertical>加载中...</van-loading>

        <div v-if="isload">
            <!-- 轮播 -->
          <van-swipe class="my-swipe" :autoplay="1000" indicator-color="pink">
          <van-swipe-item v-for="v in houseinfo.houseImg" :key="v">
              <img width="100%" height="250" :src="v" alt="">
          </van-swipe-item>
         
         </van-swipe>
         

         <div class="title">
             <h3>{{houseinfo.title}}</h3>
             <van-tag  :type="j%2==0?'success':'primary'" v-for="i,j in houseinfo.tags" :key="i" style="margin:5px">
              {{i?i:'暂无描述'}}
             </van-tag>
         </div>

         <div class="title">
             <van-grid :border="false" :column-num="3">
                <van-grid-item>
                    <h4 style="color:orange">{{houseinfo.price}}/月</h4>
                </van-grid-item>
                 <van-grid-item>
                    <h4 style="color:orange">
                        {{houseinfo.size}}m<sup>2</sup>
                    </h4>
                </van-grid-item>
                 <van-grid-item>
                    <h4 style="color:orange">
                        {{houseinfo.roomtype}}
                    </h4>
                </van-grid-item>
                 <van-grid-item>
                       <h4>价格</h4>

                </van-grid-item>
                 <van-grid-item>
                    <h4>面积</h4>
                </van-grid-item>
                 <van-grid-item>
                    <h4>户型</h4>
                </van-grid-item>
               
            </van-grid>
         </div>

         <div class="title">
             <van-grid :border="false" :column-num="2">
                <van-grid-item>
                     <van-cell title="装修" value="精修" />
                </van-grid-item>
                <van-grid-item>
                     <van-cell title="朝向" :value="houseinfo.oriented" />                    
                </van-grid-item>
                <van-grid-item>
                     <van-cell title="楼层" :value="houseinfo.floor" />                    
                    
                </van-grid-item>
                <van-grid-item>
                     <van-cell title="类型" value="普通类型" />                    
                    
                </van-grid-item>
           
            </van-grid>
         </div>
           
           <!-- 地图 -->
           <div class="title">
               <h3>
                   {{houseinfo.community}}
               </h3>
           </div>

           <div id="container" style="height:250px"></div>
           <!-- 描述 -->

           <div class="title">
               <h3>房源概况</h3>
               {{houseinfo.description}}
           </div>
            <!-- 收藏 -->
            <!-- 挡板 -->
            <div style="height:50px"></div>
           <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服"  />
            <van-goods-action-icon icon="phone-o" text="电话" @click="tel()" />
            <van-goods-action-icon :color="iscoll?'red':''" :icon="iscoll?'star':'star-o'" :text="iscoll?'已收藏':'收藏'" @click="collects()" />
           
           </van-goods-action>
        </div>
  </div>
</template>

<script>
import {Toast} from "vant"
const BMap=window.BMap
export default {
    data () {
        return {
            houseinfo:{},// 详情
            iscoll:0,// 是否收藏
            isload:0,// 数据是否加载
        }
    },
    methods: {
        getDet(){/// 获得房源详情
            this.$axios.getDet(this.$route.query)
            .then(res=>{
                console.log(res);
                if(res.data.code==200){
                     this.houseinfo=res.data.msg
                     this.isload=1
                     // 详情成功更新地图
                    setTimeout(()=>{
                         this.initMap(res.data.msg.coord)
                    },500)
                     // 数据请求成功验证是否收藏
                     this.checkcoll()
                }else{
                    Toast.fail({
                            message: res.data.msg,
                            position: 'top',
                            });
                    this.$router.push("/login")
                }
            })
        },
        initMap(coord){// 地图初始化
            // console.log(BMap);
            // return
            var map = new BMap.Map('container'); // 创建Map实例
            
            // const map = new BMap.Map('map')// 创建地图实例
            const areaPoint = new BMap.Point(coord.longitude, coord.latitude)// 初始坐标 经，纬
            map.centerAndZoom(areaPoint, 30); // 初始化
            map.addControl(new BMap.NavigationControl())
              map.addControl(new BMap.ScaleControl())// 添加控件
            const label = new BMap.Label('', {
                position: areaPoint,
                offset: new BMap.Size(-35, -35)// 根据自定义物体大小 设置中心点
            })
                    
            // // 给 label 对象添加一个唯一标识
            label.id = 666
            label.setContent(`<div style="color:red">${this.houseinfo.community}</div>`)
            map.addOverlay(label)// 添加自定义

        },
        tel(){// 打电话
            location.href="tel:13212742015"
        },
        collects(){// 收藏
            // console.log(6666);
            // 收藏什么信息  
            // 组合要收藏的参数
            let {
                houseImg,
                tags,
                houseCode,
                title,
                price
            }=this.houseinfo


            let obj=
                {
                houseImg:houseImg[0],
                tags,
                houseCode,
                title,
                price
            
            }

            console.log(obj);

            // 判断是否收藏了房源 是不是第一次条件收藏
            let housecoll=localStorage.getItem("housecoll")
            if(housecoll){// 不是第一次收藏
                  // 判断本地存储收藏 是不是包含本次点击的 房源信息
                  // 拿到收藏的数组

                  let arr=JSON.parse(localStorage.getItem("housecoll"))
                  console.log(arr);
                  let t=arr.some((v,k)=>{// 是否收藏过
                      return v.houseCode==this.houseinfo.houseCode
                  })

                  console.log(t)

                if(t){// 真 收藏过
                this.iscoll=0// 不高亮
                  let narr=arr.filter((v,k)=>{// 移出被收藏的数据
                      return v.houseCode!=this.houseinfo.houseCode
                  })
                  console.log(narr);
                  // 移出自己之后更新本地存储
                  localStorage.setItem("housecoll",JSON.stringify(narr))

                }else{// 数据没有被收藏过
                    // 高亮
                    this.iscoll=1
                    // 添加本地存储收藏
                    arr.push(obj)
                    // 添加收藏之后更新本地存储
                    localStorage.setItem("housecoll",JSON.stringify(arr))
                 
                }
            }else{// 是第一次收藏
                 let arr=[]
                 arr.push(obj)
                 localStorage.setItem("housecoll",JSON.stringify(arr))
                 this.iscoll=1
            }
        },
        // 初始加载验证是否收藏
          checkcoll(){
               let {
                houseImg,
                tags,
                houseCode,
                title,
                price
            }=this.houseinfo


            let obj=
                {
                houseImg:houseImg[0],
                tags,
                houseCode,
                title,
                price
            
            }
              // 判断是否第一次收藏了
               let housecoll=localStorage.getItem("housecoll")
               if(housecoll){// 收藏过
                   let arr=JSON.parse(localStorage.getItem("housecoll"))
                  console.log(arr);
                  let t=arr.some((v,k)=>{// 是否收藏过
                      return v.houseCode==this.houseinfo.houseCode
                  })

                  console.log(t)
                  if(t){// 已经收藏了
                      this.iscoll=1
                  }else{// 还没收藏
                      this.iscoll=0
                  }
                  
               }else{// 第一次收藏
                   this.iscoll=0
               }
          }

    },
    mounted(){
        // console.log(this.$route.query);
        this.getDet()
       
    }
}
</script>

<style>
   .title{
       box-sizing: border-box;
       padding: 10px;
       border-bottom: 1px solid gainsboro;
   }
   .anchorBL{
       display: none;
   }
   .van-goods-action{
       display: flex;
       justify-content: space-around;
   }
</style>